<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>导航组合网格 - jQuery EasyUI 演示</title>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script type="text/javascript">
		function ccFoc(){$('#cc').combogrid('showPanel').next('span').find('input').focus();}
	</script>
</head>
<body onload="ccFoc()">
	<h2 title="Navigate ComboGrid">导航组合网格</h2>
	<p title="Navigate through grid items with keyboard to select an item.">　　仅限PC（<i>移动设备拖动导航即可</i>）——在组合网格各项间导航并用键盘来选择某一项。<i>注<sup>*</sup>：组合网格的文本区（已自动呼出面板）默认已获焦点，『导航选择』值变更后再次获得焦点。</i></p>
	<div style="margin:0px 0 10px 0">
		<input type="checkbox" checked onchange="$('#cc').combogrid({selectOnNavigation:$(this).is(':checked')}); ccFoc();">
		<span title="SelectOnNavigation">导航选择</span>
	</div>
	<div class="easyui-panel" style="width:100%;max-width:400px;padding:20px;">
		<div style="margin-bottom:0px">
			<select id="cc" class="easyui-combogrid" style="width:100%" data-options="panelWidth: 614,
					idField: 'itemid', textField: 'productname', url: 'datagrid_data1.json', method: 'get',
					columns: [[
						{field:'itemid',title:'<h title=\'Item ID\'>物料编码</h>',halign:'center'},
						{field:'productid',title:'<h title=\'Product ID\'>产品编码</h>',halign:'center'},
						{field:'productname',title:'<h title=\'Product Name\'>产品名称</h>',halign:'center'},
						{field:'listprice',title:'<h title=\'List Price\'>清单<br/>价格</h>',align:'right',halign:'center'},
						{field:'unitcost',title:'<h title=\'Unit Cost\'>成本<br/>单价</h>',align:'right',halign:'center'},
						{field:'attr1',title:'<h title=\'Attribute\'>物料属性</h>',halign:'center'},
						{field:'status',title:'<h title=\'Status\'>状态</h>',align:'center'}
					]],
					fitColumns: true, label: '<h title=\'Select Item:\'>选物料：</h>',
					labelPosition: 'left', labelWidth:55, labelAlign:'right'
				">
			</select>
		</div>
	</div>
</body>
</html>